﻿<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
<script src="jquery.min.js"></script>
<script src="rotaryDraw.js"></script>
<title>转盘抽奖</title>
<style>
*{padding:0;margin:0;}
body{
	background:#f03200;
}
.box{
	position:relative;
	max-width:750px;
	margin:0 auto;
}
.box .img01{
	width:100%;
}
.box .drawBtn{
	position:absolute;
	width:10rem;
	height:auto;
	left:50%;
	margin-left:-5rem;
}
</style>
</head>
<body>

<div class="box">
	<img src="images/img_02.png" class="img01" alt="">
	<img src="images/img_03.png" class="drawBtn">
</div>

<script>
$(".box .img01").load(function() {
	var obj = $(".drawBtn");
	var hei = $(this).height();
	var hei2 = obj.height();
	obj.css("top",(hei - hei2)/2);
});
$(".box1 .img01").load(function() {
	var obj = $(".drawBtn2");
	var hei = $(this).height();
	var hei2 = obj.height();
	obj.css("top",(hei - hei2)/2);
});
</script>
<script>


function callbackA(ind)
{
	alert("哎哟不错哦");
};
function callbackB(ind)
{
	alert("哎哟不错哦");
};
var newdraw =new turntableDraw('.drawBtn',{
	share:8,
	speed:"3s",
	velocityCurve:"ease",
	weeks:6,
	callback:function(num)
	{
		callbackA(num);
	},
});
var newdraw2 =new turntableDraw('.drawBtn2',{
	share:12,
	speed:"3s",
	velocityCurve:"ease",
	weeks:6,
	callback:function(num)
	{
		callbackB(num);
	},
});
$(".drawBtn").click(function(event) {
	//ajax
	newdraw.goto(parseInt(Math.random()*8)+1);
});
$(".drawBtn2").click(function(event) {
	//ajax
	newdraw2.goto(parseInt(Math.random()*12)+1);
});
</script>
</body>
</html>